<template>
  <el-dialog v-model="visible" title="全国省市区乡村名称和编码" draggable>
    <div :class="$style.wrapper">
      <el-table border :data="listData">
        <z-table-column :list="columns"></z-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
const visible = defineModel<boolean>()

const base = import.meta.env.VITE_GIT_OSS
const columns = ref<ZColumnItem[]>([
  { label: '数据类型', key: 'name' },
  {
    label: '普通数据',
    key: 'data',
    render: (_s, val) => {
      return h(
        ElLink,
        {
          type: 'primary',
          target: '_blank',
          href: `${base}/map/${val}`
        },
        { default: () => val }
      )
    }
  },
  {
    label: 'JSON',
    key: 'json',
    render: (_s, val) => {
      return h(
        ElLink,
        {
          type: 'primary',
          target: '_blank',
          href: `${base}/map/${val}`
        },
        { default: () => val }
      )
    }
  }
])

const listData = ref([
  { name: '省级', json: 'provinces.json' },
  { name: '地级（城市）', json: 'provinces.json' },
  { name: '县级（区县）', json: 'citys.json' },
  { name: '乡级（乡镇、街道）', json: 'areas.json' },
  { name: '村级（村委会、居委会）', json: 'streets.json' },
  { name: '村级（村委会、居委会）', json: 'villages.json' },
  { name: '省市（二级联动）', json: 'pc-code.json', data: 'pc.json' },
  { name: '省市区（三级联动）', json: 'pca-code.json', data: 'pca.json' },
  { name: '省市区乡（四级联动）', json: 'pcas-code.json', data: 'pcas.json' }
])
</script>

<style lang="scss" module>
@use './style.scss';
</style>
